import React, { useState,useEffect } from 'react';
import { Modal, Button } from 'antd';

const Add = () => {
    const [visible,setVisible] = useState(false);
    const [confimLoading,setConfirmLoading] = useState(false);
    // const [modalText,setModalText] = useState('Content of the modal');

    const showModal = () => {
        setVisible(true);
    }
    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            setConfirmLoading(false);
        }, 2000);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    }

    return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal with async logic
      </Button>
      <Modal
        title="Title"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={[
            <Button key="back" onClick={handleCancel}>取消</Button>,
            <Button key="submit" type="primary" loading={confirmEdit} onClick={handleOk}>提交</Button>
        ]}
      >
        <ModelForm
         handleOk={handleOk.bind(this)}
         handleCancel={handleCancel.bind(this)}
         
        >
        </ModelForm>
      </Modal>
    </>
}
